<template>
  <div>
    <Header_h />
    <article class="core_content">
      <div class="containers">
        <div class="new_banner xs" @click="webUrl(banner[0].href)">
          <img v-if="banner[0]" :src="banner[0].tpic" alt="" />
        </div>
        <div class="searchs_eng s_flex s_align_items s_flex-wrap">
          <el-tag
            class="tl-tag"
            style="cursor: pointer"
            @click="getIndex(item.id)"
            v-for="(item, index) in tag"
            :key="item.id"
            :type="item.type"
            :effect="item.id == cutIndex ? 'dark' : 'plain'"
          >
            {{ item.name }}
          </el-tag>
        </div>
        <section class="">
          <div class="container-water-fall">
            <waterfall
              :col="col"
              :width="itemWidth"
              :gutterWidth="gutterWidth"
              :data="manuList"
              @loadmore="loadmore"
              @scroll="scroll"
              isTransition
            >
              <template>
                <div
                  class="cell-item"
                  @mouseover="mouseeovers(index)"
                  @mouseleave="mouseleaves(index)"
                  v-for="(item, index) in manuList"
                  :key="index"
                  @click="handelRouter(item.id)"
                >
                  <img :src="item.tpic" alt="加载错误" />
                  <div class="item-body" v-if="overIndex == index">
                    <div class="item-descA">{{ item.title }}</div>
                    <div class="item-descB">{{ item.company }}</div>
                  </div>
                </div>
              </template>
            </waterfall>
          </div>
          <!-- <div class="seeGd">{{finished ? "加载中" : "加载更多" }}</div> -->
          <!-- <div class="seeGd" @click="loadmore">{{ finishedText }}</div> -->
        </section>
      </div>
    </article>
    <div class="swiper_box">
      <div class="containers">
        <div class="compoy">
          <h3 class="title_color title_size2">企业名录</h3>
        </div>
        <p class="s_line"></p>
        <swipern :list="list" :type="1" :PerView="PerView" :compoyNext="'compoyNext'" />
      </div>
    </div>
    <Footer />
    <navItem />
    <rightMenu @moveTo="moveTo" />
  </div>
</template>

<script>
import swipern from "@/components/swipern";
import Header_h from "@/components/Header_h";
import Footer from "@/components/Footer";
import rightMenu from "@/components/web/rightMenu";
import { WebGetType, WebGetCountry, productGetType } from "@/api/admin";
// import Waterfall from 'vue-waterfall2'
import { productList, bannerList, productCompany } from "@/api/web";

import "swiper/css/swiper.min.css";
export default {
  components: {
    Header_h,
    Footer,
    
    swipern,
    rightMenu
  },
  data() {
    return {
      banner: [],
      overIndex: null,
      CountryValue: "",
      typeOptions: [],
      CountryOptions: [],
      typeValue: "",
      tag: [],
      cutIndex: "",
      count: 0,
      manuList: [],
      col: 3,
      page: 1,
      itemWidth: 375,
      gutterWidth: 35,
      list: [],
      page: 1,
      page_size: 10,
      tpye: "",
      finished: false,
      finishedText: "加载更多",
      windowWidth: document.documentElement.clientWidth, //实时屏幕宽度
      windowHeight: document.documentElement.clientHeight, //实时屏幕高度
      PerView:3
    };
  },
  computed: {
    // itemWidth() {
    //   return 400 * 0.5 * (document.documentElement.clientWidth / 375); //rem布局 计算列宽度 //可以根据自己的rem设置修改这里的 334 值
    // },
    // gutterWidth() {
    //   return 30 * 0.5 * (document.documentElement.clientWidth / 375); //rem布局 计算x轴方向margin(y轴方向的margin自定义在css中即可) //可以根据自己的rem设置修改这里的 36 值
    // },
  },
  mounted() {
    this.getdata();
    this.getBanner();
  },
  methods: {
        moveTo() {
      window.scrollTo(0, 0);
    },
    async getBanner() {
      try {
        this.banner = await bannerList({ from: 5 });
        this.list = await productCompany();
        this.tag = await productGetType();
      } catch (error) {
        this.$message.success(error.message);
      }
    },
    async getdata() {
      try {
        const res = await productList({ type: this.tpye, page: this.page });
        this.manuList = res.list;
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    mouseeovers(index) {
      this.overIndex = index;
    },
    mouseleaves(index) {
      this.overIndex = null;
    },
    getIndex(id) {
      // console.log(id == this.cutIndex);
      if (id == this.cutIndex) {
        this.cutIndex = "";
        this.tpye = "";
        this.getdata();
      } else {
        this.cutIndex = id;
        this.tpye = id;
        this.getdata();
      }
    },
    load() {
      this.count += 2;
    },
    handleIconClick() {},
    clear() {}, //布局
    scroll(scrollData) {
      //   // console.log(scrollData);
      // console.log(scrollData)
    },
    getcol() {
      if (this.width > 1580) {
        this.col = 3;
      } else if (1024 < this.width < 1580) {
        this.col = 2;
      } else if (768 < this.width < 1024) {
        this.col = 1;
      }
    },
    async loadmore() {
      this.page = this.page + 1;
      const list = await this.onLoad();
      this.list = [...this.list, ...list];
    },
    async onLoad() {
      const res = await productList({
        type: this.tpye,
        page: this.page,
        page_size: this.page_size,
      });
      this.finished = res.list.length < this.page_size;
      this.finishedText =
        res.list.length < this.page_size ? "暂无更多数据" : "加载更多";
      return res.list;
    },
    handelRouter(id) {
      this.$router.push({ path: "/web/facturing/details", query: { id: id } });
    },
    webUrl(url) {
      window.open(url);
    },
  },
};
</script>

<style lang="less" scoped>
.el-tag {
  margin-right: 30px;
}
/* core_content */
.core_content {
  background: #f7fbfe;
  padding: 40px 0;
}

.core_content .item_list_img {
  width: 224px;
  height: 127px;
  object-fit: cover;
  margin-right: 25px;
}

.core_content .item_list {
  border-bottom: 1px solid #eee;
  padding: 25px 0;
}

.core_content .content_spacing {
  margin: 17px auto 30px;
}
.core_content_left {
  width: 70%;
  background-color: #fff;
  margin: 10px 0;
  // position: absolute;
  // top: 0;
  // left: 0;
}
.core_content_right {
  width: 25%;
  background-color: #fff;
  // position: absolute;
  // top:0;
  // right: 0;
  // margin:10px 0;
}
.item_right_img {
  width: 281px;
  height: 181px;
  object-fit: cover;
}
.content_right_spacing {
  margin: 10px 0;
}
.list_right {
  border-top: 1px solid #eee;
  padding: 10px 0;
  margin: 0 10px;
}
.right_title {
  margin: 0 10px;
  padding: 10px 0;
}
/* core_content */

.flex-item {
  width: 29%;
  margin-top: 50px;
  background-color: #fff;
  padding: 10px;
}

.flex-item p {
  margin-top: 10px;
}
.flex-item p:last-child {
  margin-top: 20px;
}

.flex-item img {
  width: 100%;
  height: 300px;
  // object-fit: contain;
}

.flex-item .sq_success,
.flex-item .sq_end {
  margin-right: 20px;
}

.name {
  font-size: 20px;
}
.line {
  height: 75px;
}
.searchs_eng {
  //   width: 450px;
  margin-top: 50px;
}
.text_r {
  text-align: right;
}
.container-water-fall {
  // height:100vh;
  // overflow-y: auto;
  box-sizing: border-box;
}

.cell-item {
  position: relative;
  margin-top: 30px;
  overflow: hidden;
  img {
    width: 100%;
  }
  .item-body {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(115, 115, 115, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.2s ease-in;
    .item-descA {
      font-size: 30px;
      font-weight: 400;
      color: #f7fbfe;
      line-height: 60px;
    }
    .item-descB {
      font-size: 24px;
      font-weight: 400;
      color: #f7fbfe;
      line-height: 20px;
    }
  }
}
.banner_swiper {
  // padding: 50px 0;
}
.swiper_box {
  background: #fff;
  padding: 80px 0;
}
.swiper_box .compoy {
  text-align: center;
}
.seeGd {
  width: 182px;
  height: 52px;
  line-height: 52px;
  background: #ffffff;
  box-shadow: 0px 4px 8px 0px rgba(238, 238, 238, 0.68);
  border-radius: 26px;
  text-align: center;
  font-size: 20px;
  color: #4f87fb;
  margin: 40px auto;
}
@media (max-width: 750px) {
  .searchs_eng {
    margin-top: 25px;
  }
  .core_content {
    // padding: 20px 0;
  }
  .tl-tag{
    margin-right:5px;
    margin-bottom:10px;
  }
}
</style>